<template>
    <div>
        <a-modal title="新增" :visible="visible" :confirm-loading="confirmLoading" ok-text="确认" cancel-text="取消"
            @ok="handleOk" @cancel="handleCancel">
            <car-form></car-form>
        </a-modal>

        <!-- <car-form v-if="isshow"></car-form> -->
        <div style="display: flex;justify-content:space-between">
            <a-button @click="addcar" type="primary">
                新增
            </a-button>
            <a-input-search style="width: 300px ;" placeholder="输入车牌搜索车辆" enter-button="搜索" size="small"
                @search="onSearch" />
        </div>
        <a-table :columns="columns" :data-source="car" bordered>
            <template v-for="col in ['cId', 'carcolor', 'carquality']">
                <div :key="col">
                    <template>
                        {{ car }}
                    </template>
                </div>
            </template>
            <template slot="operation" slot-scope="text, record">
                <div :key="col" class="editable-row-operations">
                    <span>
                        <a @click="() => onDelete(record.cId)">删除</a>
                    </span>
                </div>
            </template>
        </a-table>

        <a-table :columns="columns" :data-source="carlist" bordered>

            <template v-for="col in ['cId', 'carcolor', 'carquality']" slot-scope="text, record">
                <div :key="col">
                    <template :record="duserlist.cId">
                        {{ text }}
                    </template>
                </div>
            </template>
            <template slot="operation" slot-scope="text, record">
                <div :key="col" class="editable-row-operations">
                    <span>
                        <a @click="() => onDelete(record.cId)">删除</a>
                    </span>
                </div>
            </template>
        </a-table>

    </div>
</template>
<script>
import CarForm from '../../src/components/CarForm.vue';
import { mapState } from 'vuex';

const columns = [
    {
        title: '车牌',
        dataIndex: 'cId',
        width: '15%',
        scopedSlots: { customRender: 'cId' },
    },

    {
        title: '车身颜色',
        dataIndex: 'carcolor',
        width: '15%',
        scopedSlots: { customRender: 'carcolor' },
    },
    {
        title: '载物质量',
        dataIndex: 'carquality',
        width: '15%',
        scopedSlots: { customRender: 'carquality' },
    },
    
    {
        title: '操作',
        dataIndex: 'operation',
        width: '15%',
        scopedSlots: { customRender: 'operation' },
    },

];

const data = [];

export default {
    inject: ['reload'],
    components: { CarForm },

    data() {
        
        return {

            data,
            columns,
            editingKey: '',
            visible: false,

        };
    },
    mounted() {
        this.$store.dispatch('carList')
        console.log(carlist)
       
    },

    computed: {
        isshow() {
            return this.$store.state.car.isshow
        },
        ...mapState({
            carlist: (state) => {
                return state.car.carlist;
            },

        }),
        ...mapState({
            car: (state) => {
                return state.car.car
            }
        })

    },
    methods: {
        addcar() {
            //this.$store.commit('isshow')  
            this.visible = true;
        },
        onSearch(value) {
            value && this.$store.dispatch('carbyid', value)
        },
        onDelete(key) {
            console.log(key)
            this.$store.dispatch('delCar', key)
            this.reload();
            // const dataSource = [...this.duserlist];
            // this.dataSource = dataSource.filter(item => item.key !== key);
        },
        showModal() {
            this.visible = true;
        },
        handleOk(e) {
            this.visible = false;
        },
        handleCancel(e) {
            console.log('Clicked cancel button');
            this.visible = false;
        },


       


    },

};
</script>
<style scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>
